<template>
    <view class="layout">
        <view class="topRow">
            <view class="wordBank">
                {{ storeName }}
            </view>
            <view class="selectBtn" @click="onClickSelect">
                选择词库
            </view>

        </view>
        <view class="progressCircle">

            <view class="persent">
                {{completionRate}}%
            </view>
            <view class="title">
                完成度
            </view>
        </view>
        <view class="startBtn" @click="onStartStudy">开始识记</view>

        <uni-popup ref="selectDialog" type="center" :is-mask-click="false">
            <view class="selectDialog">
                <view class="dialogContent">
                    <view class="dialogTitle">
                        请选择词库
                    </view>
                    <scroll-view scroll-y="true" class="scrollView">
                        <view v-for="item in wordBandMapList" :key="item.wordBankId">
                            <view :class="[item.wordBankId == tempSelectedId ? 'active-item' : 'item']"
                                @click="onClickItem(item.wordBankId)">
                                {{item.title}}
                            </view>
                        </view>
                    </scroll-view>
                    <view class="btnRow">
                        <view class="btnLeft" @click="onConfirm">
                            确认
                        </view>
                        <view class="btnRight" @click="onCloseDialog">
                            取消
                        </view>
                    </view>
                </view>
                <uni-icons type="clear" size="100rpx" @click="onCloseDialog"></uni-icons>
            </view>
        </uni-popup>


        <button size="mini" @click="wxLogin()">微信登录页面</button>
        <button size="mini" @click="gotoUniCloudCRUDPage()">前往云函数crud页面</button>
    </view>
</template>

<script setup>
    import {
        ref,
        computed
    } from "vue";
	import { onLoad } from '@dcloudio/uni-app';
	import { useUserInfoStore } from '../../../store';
	
	//获得store实例对象
	const userInfoStore = useUserInfoStore()
	
    let selectedId = ref(undefined);
    let tempSelectedId = ref(undefined);
	
	let completionRate = ref(0);
	
	const wordBandMapList = ref([
		{wordBankId: "GaoKao3500", title:"高考3500个英语单词表", url: "https://mp-aa7ff953-57bf-4040-820d-fe7d9bb8d181.cdn.bspapp.com/GaoKao3500.xls"},
		{wordBankId: "GaoKao3500-1", title:"高考3500个英语单词表-1", url: "https://mp-aa7ff953-57bf-4040-820d-fe7d9bb8d181.cdn.bspapp.com/GaoKao3500-1.xls"},
	])
	
	onLoad(async () => {
	  console.log('进度页面加载');
	  
	  let arr = uni.getStorageSync("GaoKao3500");
	  
	  const res = await uniCloud.callFunction({
	  	name: "countWords",
	  	data: {
	  		relateUuid: userInfoStore.userInfo.uuid,
	  		wordBankId: "GaoKao3500"
	  	}
	  })
	  
	  completionRate.value = ((res.result.data.num6 + res.result.data.known) / arr.length).toFixed(2)
	  
	});
	
    //词库列表
    let wordStoreList = ref([{
            "id": "0",
            "title": "小学中级体验词库0"
        },
        {
            "id": "1",
            "title": "小学中级体验词库1"
        },
        {
            "id": "2",
            "title": "小学中级体验词库2"
        },
        {
            "id": "3",
            "title": "小学中级体验词库3"
        },
        {
            "id": "4",
            "title": "小学中级体验词库4"
        },
    ]);

    function wxLogin() {
        uni.navigateTo({
            url: "/pages/login/login"
        })
    }

    function gotoUniCloudCRUDPage() {
        uni.navigateTo({
            url: "/pages/uni-cloud-study/uni-cloud-study"
        })
    }

    //词库名称
    const storeName = computed(() => {
        if (wordBandMapList.value.some(item => item.wordBankId == selectedId.value)) {
            return wordBandMapList.value.find(item => item.wordBankId == selectedId.value).title;
        }
        return "未选择词库";
    })

    const selectDialog = ref(null);


    function onClickSelect() {
        tempSelectedId.value = selectedId.value;
        selectDialog.value.open();
    }

    async function onConfirm() {
        if(tempSelectedId.value === undefined) {
			return;
		}
		const res = await uniCloud.callFunction({
		  name: 'selectMemorization',
		  data: {
			relateUuid: userInfoStore.userInfo.uuid,
			wordBankId: selectedId.value
		  }
		})
		if (res.result.code === 200) {
			selectedId.value = tempSelectedId.value;
		}
		console.log(res)
        selectDialog.value.close();
    }

    function onCloseDialog() {
        selectDialog.value.close();
    }

    function onStartStudy() {
        uni.navigateTo({
            url: "/pages/index/index"
        })
    }

    function onClickItem(id) {
        tempSelectedId.value = id;
    }
</script>

<style lang="scss" scoped>
    .layout {
        display: flex;
        flex-direction: column;
        align-items: center;

        .topRow {
            display: flex;
            flex-direction: column;
            align-items: center;

            // justify-content: space-between;
            // width: 100%;
            .wordBank {
                font-size: 30px;
                margin: 30rpx 0;
            }

            .selectBtn {
                padding: 20rpx 70rpx;
                background-color: orange;
                border-radius: 50rpx;
                font-size: 16px;
                color: white;
                display: flex;
                justify-content: center;
                font-size: 20px;
            }
        }

        .progressCircle {
            margin-top: 50rpx;
            width: 300rpx;
            height: 300rpx;
            background-color: #F6465D;
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .persent {
                color: white;
                font-size: 30px;
            }

            .title {
                font-size: 18px;
            }
        }

        .startBtn {
            margin-top: 50rpx;
            padding: 20rpx 80rpx;
            background-color: #18BB7C;
            border-radius: 50rpx;
            font-size: 20px;
            color: white;
        }

        .selectDialog {
            display: flex;
            flex-direction: column;
			align-items: center;
            gap: 60rpx;

            .dialogContent {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 40rpx;
                background-color: white;
                border-radius: 50rpx;
                width: 75vw;

                .dialogTitle {
                    margin-bottom: 80rpx;
                    padding: 15rpx 50rpx;
                    border-radius: 50rpx;
                    background-color: #18BB7C;
                    color: white;
                    font-size: 24px;
                }

                .scrollView {
                    max-height: 500rpx;

                    .item {
                        padding: 25rpx 15rpx;
                        margin-bottom: 20rpx;
                        border: 2rpx solid #EBEBEB;
                        font-size: 24px;
                        border-radius: 20rpx;
                    }

                    .active-item {
                        padding: 25rpx 15rpx;
                        margin-bottom: 20rpx;
                        border: 2rpx solid orange;
                        font-size: 24px;
                        border-radius: 20rpx;
                    }


                }

                text {
                    color: red;
                    font-size: 24px;
                }

                .btnRow {
                    display: flex;
                    flex-direction: row;
                    gap: 20rpx;
                    color: white;
                    font-size: 26px;
                    margin-top: 50rpx;

                    .btnLeft {
                        padding: 20rpx 50rpx;
                        background-color: #18BB7C;
                        border-radius: 50rpx;
                    }

                    .btnRight {
                        padding: 20rpx 50rpx;
                        background-color: orange;
                        border-radius: 50rpx;
                    }
                }
            }

        }
    }
</style>